import React from "react";
import {Col, Media, Row} from "reactstrap";
import {AvField, AvForm} from "availity-reactstrap-validation";

class SelectItem extends React.Component {

    handleChange = (e) => {
        const {options, selectedIndex} = e.target;
        this.props.setEventEditData(
            this.props.constant,
            {
                id: e.target.value,
                name: options[selectedIndex].text
            }
        );
        this.setState({
            value: e.target.value
        });
    };


    render() {

        const itemId = this.props.id;
        const from = this.props.from;
        const itemClass = this.props.class;
        const editStatus = this.props.editStatus;
        const data = this.props.data;
        const typeData = this.props.typeData;

        return (
            <Media>
                <Media body className="overflow-hidden">
                    <Row>
                        <Col md={3} className={itemId !== 3 ? "align-self-center" : ''}>
                            <span className="event-content-list-name">{from}</span>
                        </Col>
                        <Col md={9}>
                            <div className={itemClass || ''}>
                                <AvForm className="event-content-form" id="eventContentForm">
                                    <AvField
                                        className={`event-content-select ${editStatus && 'event-input-edit'}`}
                                        type="select"
                                        name="typeEvent"
                                        id="typeEvent"
                                        onChange={this.handleChange}
                                        value={this.props.value}
                                        disabled={!editStatus}
                                    >
                                        { typeData === 'eventType' ? (
                                            data && data.map(item => <option value={item.id} key={item.id}>{item.name}</option>)
                                            ) : (
                                            data && data.map(item => <option value={item.id} key={item.id}>{`${item.lastname} ${item.firstname}`}</option>)
                                        )}
                                    </AvField>
                                </AvForm>
                            </div>
                        </Col>
                    </Row>
                </Media>
            </Media>
        )
    }
}

export default SelectItem;